<template>
	<view class="">

		<view class="bgIndex ">
			<view class="flex-between">
				<view class="" v-if="userInfoObject">
					<view style="color: #fff;font-size: 46rpx;" class="">
						{{userInfoObject.balance}}
					</view>
					<view class="margin-top_40rpx" style="color: #fff;">
						<text style="margin-right: 50rpx;">今日使用 {{userInfoObject.amount_total}}</text>
						<text>累计使用 {{userInfoObject.amount_today}}</text>
					</view>
				</view>
				<!-- personalCenter/rechargeOrderList -->
				<view class="detail flex" @click="rechargeDetails()">
					<text style="margin-bottom: 5rpx;">收支明细</text>
				</view>
			</view>

		</view>
		<view class="rechargeList">
			<view class="rechargePrice flex-start-center-wrap">
				<block v-for="(item,index) in payAmountList" :key="index">

					<view @click="switchRechargePrice(index,item)"
						:class="['flex-column',currentIndex == index?'container':'container-noActive']">
						<view class="preferential flex">
							<text>超值推荐</text>

						</view>
						<view :class="[currentIndex == index?'price':'price-noActive']">

							<text style="color: rgb(162, 101, 252);font-size: 40rpx;">{{totelName(item.amount)}}</text>
							<image class="masonry" :src="currency_img?currency_img:masonry" mode=""></image>
						</view>
						<view>
							<text
								style="color: rgb(162, 101, 252);">赠{{totelName(item.give_amount)}}个{{currency_name}}</text>
						</view>
						<view class="margin-top_10rpx font-weight">
							<text style="color: #000000;">售价￥{{totelName(item.price)}}</text>
						</view>
					</view>

				</block>
			</view>

			<view class="confirmRecharge flex" @click="confirmRechargeFn(isAndroid)">
				{{isAndroid?'确定充值':'联系客服'}}
			</view>
			<radio-group v-if="isAndroid" name="apply" class="radioText flex-start-center protocol" :class="'animation-' + animation"
				@click="checkedOn2()">

				<label @click.stop="checkedOn2()">
					<view class="flex-start-center">
						<radio :checked="agreeChecked" value="1" color="#A265FC"
							style="transform:scale(0.8);padding-left:12rpx;" />
						<view class=" flex ">
							<text>充值即同意 <text style="color: #A265FC;"
									@click.stop="toAgreement()">《用户充值协议》</text>，如遇到问题，点击
								<text style="color: #A265FC;"
									@click.stop="getPhone(basicConfiguration.customer_service)">联系客服</text></text>
						</view>
					</view>

				</label>


			</radio-group>

			<sunui-popup ref="myPackagePopup">
				<template v-slot:content>

					<view class="flex-column ">
						<scroll-view :scroll-y="true" style="height: 1000rpx;">
							<view style="text-align: center; margin-bottom: 20rpx;">
								充值协议
							</view>
							 	<uv-parse :content="basicConfiguration.recharge_amount" :selectable="true"></uv-parse>
					<!-- 		<rich-parser :html="basicConfiguration.recharge_amount"
								domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" lazy-load ref="article"
								selectable show-with-animation use-anchor lazyLoad="true"></rich-parser> -->
							<!-- 	<view v-html="transaction_rule" class="">
			
							</view> -->
						</scroll-view>
					</view>

				</template>
			</sunui-popup>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currency_name: uni.getStorageSync("system").currency_name,
				currency_img: uni.getStorageSync("system").currency_img,
				masonry: this.$img.masonry,
				userInfo: uni.getStorageSync("userInfo"),
				transaction_rule: '<p>以下简称&ldquo;我们&rdquo;) 深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息: 权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等深知</p>',
				currentIndex: 0,
				onlineRechargeList: [{
						give_amount: "66",
						amount: '88'
					},
					{
						give_amount: "33",
						amount: '15'
					}, {
						give_amount: "89",
						amount: '6'
					}, {
						give_amount: "2858",
						amount: '7'
					}, {
						give_amount: "859558",
						amount: '5'
					}
				],
				userInfoObject: null,
				payAmountList: [],
				rechargeObject: null,
				basicConfiguration: null,
				animation: '',
				agreeChecked: false,
				// 是否充值
				isAndroid: true
			}
		},
		onLoad() {
			this.userInfoFn()
			this.payAmountFn()
			this.basicConfigurationFn()

			wx.getSystemInfo({
				success: (res) => {
					let platform = res.system;

					if (platform.indexOf('Android') !== -1) {
						this.isAndroid = true

						console.log('用户使用安卓设备');

					} else if (platform.indexOf('iOS') !== -1) {
						this.isAndroid = false
						// uni.showModal({
						// 	title: '提示',
						// 	content: '是否跳转到联系我们页面',
						// 	success: async (res) => {
						// 		if (res.confirm) {
						//              this.$sun.navGo('/pagesA/personalCenter/contactUs')

						// 		} else if (res.cancel) {

						// 		}
						// 	}
						// });
						console.log('用户使用苹果设备');
					}
				}
			});


		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {

						var numberStr = num.toString();
						return numberStr.replace(/(\.0+|0+)$/, '');
						// num.toString();


					}
				};
			}
		},

		methods: {
			
			rechargeDetails() {
				this.$sun.navGo('/pagesA/personalCenter/rechargeOrderList')
			},
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			},
			getPhone(val) {
				this.$sun.phone(val)

			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data

				}
			},
			async payAmountFn() {
				const result = await this.$http.post({
					url: this.$api.payAmount,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);

					if (result.data.list.length) {
						this.rechargeObject = result.data.list[0]
						this.payAmountList = result.data.list
					}

				} else {
					this.$sun.toast(result.message)
				}
			},
			confirmRechargeFn(isAndroid) {
				
				if(isAndroid){
					if (this.payAmountList.length) {
						this.$at.uniDoFunc({
							key: 'submit',
							success: async () => {
								this.$at.lockKey('submit');
								// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
								if (this.rechargeObject.status == 2) {
									this.$sun.toast('该金额已经被禁止充值请联系管理员', 'none')
									this.$at.releaseKey('submit');
								} else {
									console.log(this.form)
									if (!this.agreeChecked) {
										this.$sun.toast('请先阅读并同意《充值协议》', 'none');
										this.animation = 'shake';
										setTimeout(() => {
											this.animation = '';
										}, 1300);
										this.$at.releaseKey('submit');
									} else {
										
										
										
										
										const result = await this.$http.post({
											url: this.$api.rechargeOrder,
											data: {
												pay_amount_id: this.rechargeObject.id,
												pay_type: 1
					
											},
											headers: {
												'Authorization': this.userInfo.token
											}
					
										})
										if (result.code == 0) {
					
											// this.$sun.toast(result.message, 'none')
											console.log(result.data)
											uni.requestPayment({
												provider: 'wxpay',
												appid: result.data.appid,
												timeStamp: String(result.data.timeStamp),
												nonceStr: result.data.nonceStr,
												package: result.data.package,
												signType: result.data.signType,
												paySign: result.data.paySign,
												success: async (res) => {
													uni.showModal({
														content: "支付成功",
														showCancel: false,
														confirmText: '确定',
														success: (re) => {
															if (re.confirm) {
																this.userInfoFn()
																
																setTimeout(()=>{
																		this.$sun.navTo('/pagesA/personalCenter/personalCenter')
																},800)
																
																this.$at.releaseKey(
																	'submit');
					
															}
														}
													})
												},
												fail: (err) => {
													this.$at.releaseKey('submit');
													console.log(JSON.stringify(err));
													this.$sun.toast("取消支付", 'error');
												}
											});
					
					
											this.$at.releaseKey('submit');
										} else {
											this.$sun.toast(result.message, 'none')
											this.$at.releaseKey('submit');
										}
									}
					
					
					
					
								}
							}
						});
					} else {
						this.$sun.toast('请添加充值列表', 'none')
					}
				}else{
					this.$sun.navGo('/pagesA/personalCenter/contactUs')
				}


			},
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.userInfoObject = result.data



				}
			},
			switchRechargePrice(index, item) {

				this.currentIndex = index,
					this.rechargeObject = item

			},

			toAgreement() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-15/2dde9202406151420256641.png');
		// width: 856rpx;
		height: 296rpx;
		padding: 80rpx 30rpx;

		.detail {
			width: 144rpx;
			height: 56rpx;
			border-radius: 124rpx;
			color: #854EFE;
			background: rgb(255, 255, 255);
		}

	}

	/* 隐私协议 start */
	.radioText {
		margin: 38rpx 0;
	}

	.agree {
		color: #666;

		text {
			color: #1890ff;
			// color: #19c866;
		}
	}

	.animation {
		width: 10rem;
		height: 2rem;
		background: #ffffff;
		margin-top: 0.5rem;
	}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		10% {
			transform: translateX(-9px);
		}

		20% {
			transform: translateX(8px);
		}

		30% {
			transform: translateX(-7px);
		}

		40% {
			transform: translateX(6px);
		}

		50% {
			transform: translateX(-5px);
		}

		60% {
			transform: translateX(4px);
		}

		70% {
			transform: translateX(-3px);
		}

		80% {
			transform: translateX(2px);
		}

		90% {
			transform: translateX(-1px);
		}
	}

	.rechargeList {
		padding: 24rpx;

		position: relative;
		margin-top: -20rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 80vh;
		background: rgb(255, 255, 255);



		.rechargePrice {
			margin-top: 40rpx;

			.masonry {
				width: 16px;
				height: 16px;
				margin-left: 5rpx;
			}

			.container {

				margin: 0 30rpx 58rpx 0;

				width: 210rpx;
				height: 193.2rpx;
				box-sizing: border-box;
				border: 2rpx solid rgb(162, 101, 252);
				border-radius: 10px;
				background: rgb(252, 241, 255);
				;

				.preferential {
					align-self: flex-start;
					border-radius: 28rpx 40rpx 40rpx 0rpx;
					color: rgb(255, 255, 255);

					font-size: 20rpx;
					font-weight: 400;
					background: linear-gradient(94.57deg, rgb(155, 78, 254) 0.402%, rgb(193, 87, 255) 99.517%);
					width: 114rpx;
					height: 48rpx;

					margin-top: -45rpx;

				}
			}

			.container:nth-child(3n) {
				margin-right: 0;
			}

			.container-noActive {

				margin: 0 30rpx 58rpx 0;

				width: 210rpx;
				height: 193.2rpx;
				box-sizing: border-box;
				border: 1px solid rgb(234, 234, 234);
				border-radius: 10px;

				background: #fff;

				.preferential {
					align-self: flex-start;
					border-radius: 28rpx 40rpx 40rpx 0rpx;
					color: rgb(255, 255, 255);

					font-size: 20rpx;
					font-weight: 400;
					background: linear-gradient(94.57deg, rgb(155, 78, 254) 0.402%, rgb(193, 87, 255) 99.517%);
					width: 114rpx;
					height: 48rpx;

					margin-top: -45rpx;

				}
			}

			.container-noActive:nth-child(3n) {
				margin-right: 0;
			}

			.price {
				color: rgb(122, 85, 32);

				font-size: 50rpx;
				font-weight: 700;
			}

			.price-noActive {
				color: rgb(56, 56, 56);

				font-size: 50rpx;
				font-weight: 700;
			}
		}

		.confirmRecharge {
			position: fixed;
			bottom: 90rpx;
			width: 708rpx;
			height: 104rpx;
			border-radius: 102rpx;
			color: #fff;
			background: linear-gradient(99.09deg, rgb(135, 41, 243) 0.149%, rgb(249, 85, 234) 99.898%);
		}

		.protocol {
			width: 708rpx;
			position: fixed;
			bottom: -20rpx;
		}
	}
</style>